<template>
  <!-- <div>{{ parent_list }}</div> -->
  <div class="CommentList2">
    <!-- {{ CommentList2 }} -->
    <!-- <div
      v-for="item in CommentList2"
      :key="item"
      class="info_box"
    >{{ item.COMMENT_EVALUATEM_EVALUATE }}</div>-->
    <!-- <div class="demo-collapse"> -->
    <!-- <el-collapse accordion>
        <el-collapse-item title="好评" name="1">
          <CommentGood :good_id="good_id" />
        </el-collapse-item>
        <el-collapse-item title="中评" name="2">
          <CommenMedium :med_id="med_id" />
        
        </el-collapse-item>
        <el-collapse-item title="差评" name="3">
          <CommentBad :bad_id="bad_id" />
         
        </el-collapse-item>
    </el-collapse>-->
    <el-tabs tab-position="left" v-model="activeName" style class="demo-tabs">
      <el-tab-pane label="好评" name="first">
        <CommentGood :review_id="review_id" />
      </el-tab-pane>
      <el-tab-pane label="中评" name="second">
        <CommenMedium :review_id="review_id" />
      </el-tab-pane>
      <el-tab-pane label="差评" name="third">
        <CommentBad :review_id="review_id" />
      </el-tab-pane>
    </el-tabs>
    <!-- <el-tabs v-model="activeName" type="card" class="demo-tabs">
      <el-tab-pane label="好评" name="first">
        <CommentGood :good_id="good_id" />
      </el-tab-pane>
      <el-tab-pane label="中评" name="second">
        <CommenMedium :med_id="med_id" />
      </el-tab-pane>
      <el-tab-pane label="差评" name="third">
        <CommentBad :bad_id="bad_id" />
      </el-tab-pane>
    </el-tabs>-->
  </div>
  <!-- </div> -->
</template>
    
<script setup lang="ts">
const props = defineProps<{
  city_id_list: String;
}>();
const activeName = ref("first");
let review_id = ref(props.city_id_list);
let good_id = ref(props.city_id_list);
let med_id = ref(props.city_id_list);
let bad_id = ref(props.city_id_list);
watch(
  () => props.city_id_list,
  (newValue, oldValue) => {
    if (newValue) {
      review_id.value = props.city_id_list;
      good_id.value = props.city_id_list;
      med_id.value = props.city_id_list;
      bad_id.value = props.city_id_list;
      // get_data(newValue);
      console.log(" comment_id.value", props.city_id_list);
    }
  }
);
</script>
    
    <style lang="scss" scoped>
.CommentList2 {
  display: flex;
  background-color: rgba(255, 255, 255, 0.8);
  width: 100%;
  // height: 300px;

  // text-align: center;
  // justify-content: center;
  // .demo-collapse {
  //   width: 100%;
  //   height: 100%;
  // }
}
:deep(.el-tabs) {
  display: flex;
  flex-direction: row;
  // height: 350px;
  // overflow-y: scroll;
  overflow: hidden;
  // padding: 0;
  width: 100% !important;
  padding: 0;
}

:deep(.el-tabs .el-tabs--left .demo-tabs) {
  // height: 500px;
}
:deep(.el-tabs__content) {
  // padding: 32px;
  color: #6b778c;
  height: calc(47vh - 60px);
  width: 100%;
  // font-size: 32px;
  // font-weight: 600;
}
</style>